<template>
  <div id="app">
    <el-header :showBox="false" :title="'饿了么'"></el-header>
    <div class="content">
      <el-content v-for="(item,index) in list" :key="index" :title="item.title" :nicename="item.nicename" :content="item.content" :time="item.time"></el-content>
    </div>
    <button class="btn" @click="showBox=true">添加</button>
    <el-alertbox v-show="showBox" @hidee="showBox=false"></el-alertbox>
  </div>
</template>

<script>
import elHeader from './components/el-header'
import elContent from './components/el-content'
import elAlertbox from './components/el-alertbox'

export default {
  name: 'App',
  components: {
    elHeader,
    elContent,
    elAlertbox
  },
  data(){
    return {
      list:[],
      showBox:false
    }
  },
  created(){
    this.$http('/api/list').then((res) => {
      if(res.data.code == 0){
        this.list = res.data.data
      }
    }).catch((err) => {
      console.log(err)
    })
  },
  methods:{
    close(){
      console.log(this.showBox)
      this.showBox=false;
    }
  }
}
</script>

<style>
#app{
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.content{
  width: 100%;
  flex: 1;
}
.btn{
  width: 100%;
  height: 44px;
  position: absolute;
  bottom: 0;
  left: 0;
}
</style>
